<template>
    <div>
        <!-- 首页轮播图结构 -->
        <Carousel />
        <!-- 首页搜索医院的表单区域 -->
        <Search />
        <!-- 底部展示医院的等级 -->
        <el-row :gutter="15">
            <el-col :span="20">
                <!-- 等级子组件 -->
                <Level @getLevel="getLevel" />
                <!-- 地区子组件 -->
                <Region @getRegion="getRegion" />
                <!-- 展示医院的结构 -->
                <div class="hospital" v-if="hasHospitalArr.length>0">
                    <Card class="item" v-for="(item,index) in hasHospitalArr" :key="index" :hospitalInfo="item" />
                </div>
                <el-empty v-else description="没有医院" />
                <!-- 分页器  -->
                <el-pagination
                    class="pagination"
                    v-model:current-page="pageNo"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    :background="true"
                    layout="prev, pager, next, jumper,->,sizes,total,"
                    :total="total"
                    @current-change="curretChange"
                    @size-change="sizeChange"
                />
            </el-col>
            <el-col :span="4">
                <Tip/>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
// 引入首页轮播图组件
import Carousel from "./carousel/index.vue";
import Search from "./search/index.vue";
import Level from "./level/index.vue";
import Region from "./region/index.vue";
import Card from "./card/index.vue";
import Tip from "./tip/index.vue"
// 引入 content ts数据类型，对数据进行约束
import type { Content,HospitalResponseData } from "@/api/home/type";
// 分页器需要的数据
import {onMounted,ref} from 'vue';
// 引入组合式API函数
import {reqHospital} from '@/api/home/index';
// 分页器页码
let pageNo =ref<number>(1);
// 一页展示多少条数据
let pageSize=ref<number>(10);
// 存储已有的医院的数据
// 加上 content 约束类型
let hasHospitalArr =ref<Content>([]);
// 总的个数
let total =ref<number>(0);
// 存储医院的等级相应数据
let hostype = ref<string>('');
// 存储医院的地区
let districtCode = ref<string>('');

// 挂在完毕
onMounted(()=>{
    getHospitalInfo();
})

// 获取已有医院数据
const getHospitalInfo=async ()=>{
    // 获取医院的数据
    let result:HospitalResponseData =await reqHospital(pageNo.value,pageSize.value,hostype.value,districtCode.value);
    // console.log(result); 
    if(result.data.code==200){
        hasHospitalArr.value=result.data.data.content;
        total=result.data.data.totalElements;
    }
}
// 分页器页码发生变化时候的回调
const curretChange =()=>{
    getHospitalInfo();
}
// 分页器下拉菜单发生变化时候的回调
const sizeChange=()=>{
    // 当前页码归第一页
    pageNo.value=1;
    // 再次发请求获取医院的数据
    getHospitalInfo();
}

// 子组件自定义事件：获取儿子给父组件传递过来的等级参数
const getLevel =(level:string)=>{
    //修改hostype的值
    hostype.value=level;
    //再次发请求
    getHospitalInfo();
}

// 子组件自定义事件：获取儿子给父组件传递过来的地区参数
const getRegion =(region:string)=>{
    districtCode.value=region;
    getHospitalInfo();
}

</script>

<style scoped lang="scss">
.hospital {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
        width: 48%;
        margin: 10px 0px;
    }
}
:deep(.pagination){
    margin-bottom: 10px;
}
</style>
